<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="../css/mui.css">
    <link rel="stylesheet" href="./css/demo-common.css">
    <link rel="stylesheet" href="./css/atom-one-light.css">
    <script src="./js/jquery-2.2.3.min.js"></script>
    <script src="./js/highlight.pack.js"></script>
  </head>
  <body>
    <h3>Panel面板</h3>

    <h4>基本实例</h4>
    <section>
      <div class="example">
      	<div class="panel">
      		<div class="panel-head">
            <span class="panel-title">标题</span>
          </div>
      		<div class="panel-body">这里是内容</div>
      	</div>
      </div>
      <pre><code>
  &lt;div class="panel"&gt;
    &lt;div class="panel-head"&gt;
      &lt;span class="panel-title"&gt;标题&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="panel-body"&gt;这里是内容&lt;/div&gt;
  &lt;/div&gt;
      </code></pre>
    </section>

    <h4>表格和foot</h4>
    <section>
      <div class="example">
          <div class="panel">
            <div class="panel-head">
              <span class="panel-title">标题</span>
            </div>
            <div class="panel-body">这里是内容</div>
            <table class="table">
              <thead>
                <tr>
                  <th>姓名</th>
                  <th>年龄</th>
                  <th>邮箱</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>张三</td>
                  <td>24</td>
                  <td>zhangsan@gmail.com</td>
                </tr>
                <tr>
                  <td>李四</td>
                  <td>20</td>
                  <td>lisi@hotmail.com</td>
                </tr>
                <tr>
                  <td>王五</td>
                  <td>32</td>
                  <td>wangwu@yahu.com</td>
                </tr>
              </tbody>
            </table>
            <div class="panel-foot">
              共3条记录，第1页
            </div>
          </div>
      </div>
      <pre><code>
  &lt;div class="panel"&gt;
    &lt;div class="panel-head"&gt;
      &lt;span class="panel-title"&gt;标题&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="panel-body"&gt;这里是内容&lt;/div&gt;
    &lt;table class="table"&gt;
      ...
    &lt;/table&gt;
    &lt;div class="panel-foot"&gt;共3条记录，第1页&lt;/div&gt;
  &lt;/div&gt;
      </code></pre>
    </section>

    <h4>Warning</h4>
    <section>
      <div class="example">
        <div class="panel panel-warning">
          <b>Note:</b> Dialogs use the HTML dialog element, which currently has very limited cross-browser support. To ensure support across all modern browsers, please consider using a polyfill or creating your own.
        </div>
      </div>
      <pre><code>
  &lt;div class="panel panel-warning"&gt;
    &lt;b&gt;Note:&lt;/b&gt; Dialogs use the HTML dialog element, which currently has very limited cross-browser support. To ensure support across all modern browsers, please consider using a polyfill or creating your own.
  &lt;/div&gt;
      </code></pre>
    </section>

    <script>
      $(document).ready(function() {
        $('pre code').each(function(i, block) {
          hljs.highlightBlock(block);
        });
      });
    </script>
  </body>
</html>